<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>私房菜商家页面</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
        * {
            box-sizing: border-box;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;  /* 1. 需要将页面的高度设置成浏览器可视区域的高度 */
        }
        #container {
            min-height: 100%; /* 2. 需要将容器的高度设置成100% */
            position: relative; /* 3. 容器的position设置为relative，给子元素定位提供基点 */
        }
        footer {
            color: #FFF;
            padding: 20px;
        }
        
        footer {
            position: absolute;
            bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
            width: 100%;
            background-color: #457B9D;
        }
		</style>
    </head>
	
    <body background="./123456789.jpg" 
	style="background-repeat:no-repeat;
	background-attachment:fixed; 
	background-size:100% 100%; ">
		<div id="myapp">  <!-- 标签通过选择器绑定vue对象，标签里面可以使用vue对象的数据，进而渲染页面 -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">商家页面</a>
        </nav>
				
        <!--components-->
        <section class="my-5 pt-5">	
            <div class="container">
			
                <!-- Tables  -->
                <div class="row mb-5" id="tables">
                    <div class="col-sm-12">
                        <h1>订单</h1>
						<span> 
							<button type="submit" class="btn btn-primary" v-on:click="show_add()">管理</button> 
						</span>	
						
                        <div class="mt-3 mb-5">
                           
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>桌号</th>
										<th>订单号</th>
                                        <th>所点菜品</th>
                                        <th>订单状态</th>
										<th>操作</th>              
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
										<th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
										<th></th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr v-for="order in orderes">
                                        <td>{{order.table_id}}</td>
										<td>{{order.id}}</td>	
										<td>{{order.dishes}}</td>
										<td>{{order.status}}</td> 
										<td>
											<div v-show="add_show_flag==false">
												<span v-show="order.status==0">
													待完成
												</span>
												<span v-show="order.status==1">
													已完成
												</span>
											</div>
											<div v-show="add_show_flag==true">	
												<button type="submit" class="btn btn-primary" v-on:click="del_order_commit(order.id)">删除</button>
												<button type="submit" class="btn btn-primary" v-on:click="order_update(order.id)">修改订单状态</button>
											</div>
										</td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
		</div>
        
		<div id="container">       
			<footer>
				<p class="pt-2 text-muted">顾客就是上帝 &copy;私房菜</p>
			</footer>
		</div>
		
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 链接库 -->
		
		<script> 
			var app = new Vue({ //定义vue对象
				el: '#myapp',  //选择器名称
				data: {					
					add_show_flag:false,					
					orderes: []
				}, 
				methods: {
					get_allorderes: function(){
						//定义一个ajax对象
						//ajax就是一个http客户端，会自动向服务器发送请求
						//得到响应后，通过回调函数进行指定的操作
						$.ajax({
							url:"/order",  //http的url请求的资源路径，可以看成执行 ip:port/dish
							type: "get",  //请求方法
							context: this, //给ajax对象规定this值，为vue对象,即this就是app
							success:function(result){  //result是响应的结果
								this.orderes = result;
							}
						});
					},
					show_add: function(){
						if(this.add_show_flag == true){
							this.add_show_flag = false;
						}else {
						this.add_show_flag = true;
						}
					},
					
					del_order_commit:function(id){
						$.ajax({
							url:"/order/" + id,  //拼接一个资源路径
							type: "delete",  
							context: this, 
							success:function(result){   //响应成功之后的回调
								this.get_allorderes();
								alert("删除订单成功");																
							}
						});
					},					
					order_update: function(id){												
						var order = {status:1};							
						$.ajax({
							url:"/order/" + id,  //http的url请求的资源路径，
							type: "put",  
							context: this, //给ajax对象规定this值，为vue对象,即this就是app
							data: JSON.stringify(order), //json的序列化，将新增的菜品信息进行序列化为字符串。data是要提交给服务器的数据
							success:function(result){
								
								this.get_allorderes();
								alert("修改订单状态信息成功");	
							}
						});
					}			
				}	
			}); 
			app.get_allorderes(); //页面获取成功后，就会自动调用这个函数完成数据的获取
		</script>
    </body>	
</html>
